<template>
	<view>
		<u-popup ref="uPopup" :show="show" :round="10" mode="bottom" @close="close" closeable>
			<view class="UPOP">
				<view class="title ">设置</view>
				<view class="margin">
					<view class="videoAd">
						<view class="info ">
							<input v-model="defaulthost" :placeholder="'请输入域1.1.1.1:11434搜索模型'"/>
						</view>
						<view class="btn" @click="searchClick">搜索</view>
					</view>
					<u-line></u-line>
					<view class="invite">
						<view class="info ">
							<view class="inviteTitle ">
                            <picker @change="bindPickerChange" :value="index" :range="array">
        						<view class="uni-input">{{array[index]?array[index]:'点击选择模型'}}</view>
        					</picker></view>
						</view>
						<view class="btn">
							<text>模型</text>
					   </view>
					</view>
					<u-line></u-line>
				</view>
				<u-button type="primary" @tap="save" text="确定">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/global/config.js';
	//import {connectWebSocket} from "../../common/useSocket";

	//const globalData = getApp().globalData;
	//import models from '@/components/model/model.vue';
	//import wxLogin from '@/components/wxLogin/wxLogin.vue';
	export default {
		name:"user-model",
		//components:{models,wxLogin},
		props:{
			host:{	//显示的内容
				type: String,
				default: ''
			},
			model:{	//显示的内容
				type: String,
				default: ''
			}
		},
		data() {
			return {
                proxyUrl:config.proxy_url,
                requesttype:config.default_type,
				show: false,
                defaulthost:'',
                array:[],
                index:0,

			};
		},
        mounted(){
            if(this.host){
                this.defaulthost = this.host;
                this.searchClick();
            }
            if(this.host){
                this.array.push(this.model) ;
            }
        },
		methods:{
			open(type){
				this.show = true;
				this.$refs.uPopup.open();
                if(this.defaulthost){
                    this.searchClick();
                }
			},
			close(e) {
				this.show = false;
				if(e)this.$refs.uPopup.close();
			},
            save(){
                var result={'host':this.defaulthost,'model':this.array[this.index]};
                if(!result.host){
                    uni.showToast({
                    	title: '请填写域地址',
                    	duration: 2000
                    });return;
                }
                if(!result.model){
                    uni.showToast({
                    	title: '请选择模型',
                    	duration: 2000
                    });return;
                }
				this.close(1);console.log('save');
				this.$emit('save',result);
            },
            bindPickerChange(e){
                console.log(e.detail.value);
                this.index = e.detail.value;
            },
            searchClick(){
                if(!this.show)return;
                if(!this.defaulthost){
                    uni.showToast({
                    	title: '请填写域地址',
                    	duration: 2000
                    });return;
                }
                const urlRegex =
        				/^https?:\/\/((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){3}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)(:\d+)?(\/.*)?$/;
        		if (!urlRegex.test(this.defaulthost.trim())) {
        			var msg = '请按下面格式输入。\n输入命令(/url http://127.0.0.1:11434)';
                    uni.showToast({
                    	title: msg,
                    	duration: 2000
                    });return;
        		}
                var self = this;
                uni.showLoading({
					title: '加载中',
					mask: true
				});
                // 原始API URL
                const targetUrl = self.defaulthost+'/api/tags';
                const url =self.requesttype==2? self.proxyUrl+''+ targetUrl:targetUrl;
                uni.request({
					url: url,
					success(res) {
						uni.hideLoading();
						if (res.statusCode !== 200 || typeof res.data !== 'object') {
							uni.showToast({
                            	title: '网络错误',
                            	duration: 2000
                            });
							return false;
						}
						const models = res.data.models?res.data.models:[];
                        var list=[];
                        if(models.length>0)self.index=-1;
                        for(var i in models){
                            var model = models[i].model;
                            list.push(model);
                            if(self.model && model==self.model)self.index=i;
                        }
                        self.array=list;
					},
					fail(res) {
						uni.hideLoading();
                        if(res.errMsg){
                            uni.showToast({
                            	title: res.errMsg,
                            	duration: 2000
                            });
                        }
					}
				});
            },
		}
	}
</script>

<style lang="scss">
	.UPOP {
		padding: 30rpx;

		.title {
			align-items: center;
			display: flex;
			font-size: 30rpx;
			font-weight: 450;
			height: 90rpx;
			justify-content: center;
		}

		.margin {
			margin: auto;
			.userInfo-box{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}
			.userInfo {
				align-items: center;
				display: flex;
				margin-bottom: 30rpx;
				.info {
					color: #3a3a3a;
					display: flex;
					flex-direction: column;
					font-size: 29rpx;
					justify-content: center;
					.name {
						font-size: 40rpx;
						font-weight: 500;
					}

				}
				.avatar{
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					margin-right: 30rpx;
				}
			}
			.stat {
				align-items: center;
				color: #007AFF;
				display: flex;
				font-size: 27rpx;
				margin-bottom: 30rpx;

				.free,
				.have {
					background-color: rgba(81, 181, 237, .1);
					border-radius: 7rpx;
					padding: 13rpx;
				}

				.free {
					margin-left: 30rpx;
				}
			}

			.invite {
				align-items: center;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				margin-top: 15rpx;
				.info {
					line-height: 50rpx;

					.inviteTitle {
						color: #3a3a3a;
						font-size: 30rpx;
						font-weight: 450;
					}

					.award {
						color: #3a3a3a;
						font-size: 28rpx;
					}

					.award .span {
						color: #007AFF;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}

					.hint {
						align-items: center;
						color: #ababab;
						display: flex;
						font-size: 25rpx;
					}

					.hint .more {
						font-size: 40rpx;
						margin-left: 5rpx;
						margin-right: 5rpx;
					}

				}

				.btn {
					align-items: center;
					background-color: rgba(81, 181, 237, .1);
					border-radius: 50rpx;
					color: #007AFF;
					display: flex;
					font-size: 28rpx;
					height: 60rpx;
					justify-content: center;
					padding-left: 25rpx;
					padding-right: 25rpx;
					position: relative;

					.button {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}

			.videoAd {
				align-items: center;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				margin-top: 15rpx;

				.info {
					line-height: 50rpx;

					.videoAdTitle {
						color: #3a3a3a;
						font-size: 30rpx;
						font-weight: 450;
					}

					.award {
						color: #3a3a3a;
						font-size: 28rpx;
					}

					.award .span {
						color: #007AFF;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}

				.btn {
					align-items: center;
					background-color: rgba(81, 181, 237, .1);
					border-radius: 50rpx;
					color: #007AFF;
					display: flex;
					font-size: 28rpx;
					height: 60rpx;
					justify-content: center;
					padding-left: 25rpx;
					padding-right: 25rpx;
					position: relative;
				}
			}
		}
	}
	/* 按钮样式处理 */
	.button {
		font-size: 28rpx;
	}

	/* 取消按钮默认的边框线效果 */
	.button:after {
		border: none;
	}

	/* 设置图片默认样式，取消默认尺寸 */
	.image {
		display: block;
		height: auto;
		width: auto;
	}
    .info {width:80%;}
	/* 输入框默认字体大小 */
	.input {
		font-size: 28rpx;
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 行式弹性盒子 */
	.flex_row {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		flex-grow: 1;
	}
</style>